import React, { Component } from 'react'
import { connect } from 'react-redux'
import { global as globalDuck } from 'ducks'
import ValidTeamName from 'graphql/user/validTeamName.graphql'
import NewTeam from 'graphql/user/newTeam.graphql'
import { ValidType } from 'components/validForm'
import {
  Form as FormTable, Section as TableSection, Input, Submit,
} from 'components/tableForm'

const getVariables = values => ({
  name: values.name.value,
})

class newTeamView extends Component {
  componentDidMount = () => {}

  render() {
    const {
      match, org,
    } = this.props
    const orgName = org.owner_object.name
    let { path } = match.params
    const cancleUrl = path ? `/org/${orgName}/user/teams/list/${path}` : `/org/${orgName}/user/teams/list`
    path = path || ''
    const folderNameRule = [
      {
        type: ValidType.REGULAR,
        value: /^[\s\S]*.*[^\s][\s\S]*$/,
        errorMessage: '组织名称不能为空',
      },
      {
        type: ValidType.REGULAR,
        value: /^[\u4E00-\u9FA5A-Za-z0-9_]+$/,
        errorMessage: '组织名称由中文、英文数字包括下划线',
      },
      {
        type: ValidType.REMOTE,
        value: {
          query: ValidTeamName,
          params: { ownerId: org.owner_object.id, path },
        },
        errorMessage: '当前组织下名字重复',
        getResult: re => re.team_member.length === 0,
      },
    ]
    return (
      <FormTable>
        <TableSection header="创建子组织">
          <Input
            name="name"
            header="组织名称"
            description="组织名称由字符组成 ，可包含 字母、数字、下划线。"
            rules={folderNameRule}
          />
        </TableSection>
        <Submit
          submit={{
            text: '创建',
            variables: { ownerId: org.owner_object.id, path },
            getVariables,
            mutation: NewTeam,
            success: data => cancleUrl,
          }}
          cancle={{ text: '取消', url: cancleUrl }}
        />
      </FormTable>
    )
  }
}

const mapDispatchToProps = {}

export default connect(
  null,
  mapDispatchToProps,
)(newTeamView)
